<template>
  <p-card :bordered="false">
    <!-- 查询区域 -->
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <!-- 头部条码扫描 -->
      <p-row type="flex" justify="space-between">
        <p-col span="16">
          <p-form-model layout="inline" :model="topForm" :rules="rules">
            <p-row :gutter="24">
              <p-col :xl="9" :lg="7" :md="8" :sm="24">
                <p-form-model-item label="条码扫描">
                  <p-input placeholder="请输入"></p-input>
                </p-form-model-item>
              </p-col>
              <p-col :xl="7" :lg="7" :md="8" :sm="24">
                <p-form-model-item label="线体">
                  <p-select
                    v-model="topForm.lineno"
                    @change="changeLine"
                    allowClear
                  >
                    <p-select-option
                      v-for="item in lines"
                      :key="item.codeValue"
                      :value="item.codeValue"
                      >{{ item.textValue }}</p-select-option
                    >
                  </p-select>
                </p-form-model-item>
              </p-col>
              <p-col :xl="7" :lg="7" :md="8" :sm="24">
                <p-form-model-item label="工站">
                  <p-tree-select
                    v-model="topForm.stationCode"
                    :tree-data="stations"
                    :dropdown-style="{ maxHeight: '500px' }"
                    tree-node-filter-prop="title"
                    show-search
                    allow-clear
                    tree-default-expand-all
                    @change="changeHandler"
                  />
                </p-form-model-item>
              </p-col>
            </p-row>
          </p-form-model>
        </p-col>
        <p-col>
          <p-button type="primary">关键件采集</p-button>
          <p-button type="primary" style="margin: 0 10px 0 10px"
            >包装采集</p-button
          >
          <p-button type="primary">老化采集</p-button>
        </p-col>
      </p-row>
      <!-- 表格标签 -->
      <p-row type="flex" justify="space-between">
        <p-col>
          <span
            style="
              border: 1px solid #eee;
              display: inline-block;
              padding: 4px;
              border-bottom: 0;
            "
            >当前扫码信息</span
          >
          <p-button style="margin: 0 90px">老化开始</p-button>
          <p-button type="primary">老化结束</p-button>
        </p-col>
        <p-col>
          <p-button>开线点检</p-button>
          <p-button>SOP</p-button>
          <p-button>数据采集</p-button>
          <p-button>首检</p-button>
          <p-button>工序采集</p-button>
          <p-button>生产异常</p-button>
          <p-button>工序交接</p-button>
          <p-button>工序产出</p-button>
          <p-button>在线送修</p-button>
        </p-col>
      </p-row>
      <!-- 关键数量模块 -->
      <p-row type="flex" justify="space-between">
        <p-col :span="8">
          <div class="left_list">
            <p-form-model :layout="horizontal" :model="searchForm">
              <p-form-model-item>
                <p-input
                  placeholder="带出当前扫码的产品SN"
                  v-model.trim="searchForm.SN"
                />
              </p-form-model-item>
              <p-form-model-item>
                <p-input
                  placeholder="带出当前扫码的关键件条码信息"
                  v-model="searchForm.info"
                />
              </p-form-model-item>
            </p-form-model>
          </div>
        </p-col>
        <p-col
          :span="14"
          class="ProcessDetails"
          style="
            height: 250px;
            border: 1px solid #eee;
            line-height: 40px;
            padding: 30px 20px 0px 20px;
          "
        >
          <!-- 右上侧Table区域 -->
          <p-form-model layout="inline" :model="form">
            <p-row :gutter="24">
              <p-col :xl="8" :lg="7" :md="8" :sm="24">
                <p-form-model-item label="容器码">
                  <p-input
                    placeholder="请输入"
                    v-model="form.barCode"
                  ></p-input>
                </p-form-model-item>
              </p-col>
              <p-col :xl="8" :lg="7" :md="8" :sm="24">
                <p-form-model-item label="产品名称">
                  <p-input
                    placeholder="请输入"
                    v-model="form.productName"
                  ></p-input>
                </p-form-model-item>
              </p-col>
              <p-col :xl="8" :lg="7" :md="8" :sm="24">
                <p-form-model-item label="数量">
                  <p-input
                    placeholder="请输入"
                    v-model="form.productQty"
                  ></p-input>
                </p-form-model-item>
              </p-col>
            </p-row>
          </p-form-model>
          <div class="notice">
            <p-alert
              v-show="tags"
              :message="message"
              type="success"
              closable
              :after-close="handleClose"
            />
          </div>
          <div>
            <p-row
              :gutter="10"
              type="flex"
              align="middle"
              justify="space-around"
            >
              <p-col span="6" class="box" style="background: #409eff">
                <p>待老化</p>
                <p>0</p>
              </p-col>
              <p-col span="6" class="box" style="background: #006666">
                <p>老化中</p>
                <p>0</p>
              </p-col>
              <p-col span="6" class="box" style="background: #3333ff">
                <p>已老化</p>
                <p>0</p>
              </p-col>
            </p-row>
          </div>
        </p-col>
      </p-row>
      <!-- 底部采集表格 -->
      <p-row type="flex" justify="space-between" style="margin-top: 20px">
        <!-- 左表 -->
        <p-col span="8">
          <p-row type="flex" justify="space-between">
            <span
              style="
                border: 1px solid #eee;
                display: inline-block;
                padding: 4px;
                border-bottom: 0;
              "
              >当前容器清单(结束老化)</span
            >
            <p-button type="primary" @click="endAging">结束老化</p-button>
          </p-row>
          <p-table
            ref="table"
            size="middle"
            bordered
            :pagination="false"
            rowKey="id"
            :columns="columns"
            :scroll="tableScroll"
            :dataSource="dataSource"
            :loading="loading"
            @change="handleTableChange"
            :rowSelection="{
              fixed: true,
              selectedRowKeys: selectedRowKeys,
              onChange: onSelectChange,
            }"
          />
        </p-col>
        <!-- 右表 -->
        <p-col span="14">
          <p-button type="primary">老化记录</p-button>
          <p-table
            ref="table"
            size="middle"
            bordered
            :pagination="false"
            rowKey="id"
            :columns="columns1"
            :scroll="tableScroll1"
            :dataSource="bindrecordData"
            :loading="loadingRecord"
            @change="handleTableChange"
          />
        </p-col>
      </p-row>
    </div>
    <!-- 弹出窗 -->
    <Reason ref="Reason" @endOking="endOking"></Reason>
  </p-card>
</template>

<script>
import { api } from "@/api/manage";
import { filterObj, timestampToDatetime } from "@/utils/util";
import { postAction, getAction } from "@/api/manage";
import Reason from "./modules/Reason";
import { JeecgListMixin } from "@/mixins/JeecgListMixin";
import mixins from "./modules/line-station";

//当前容器清单
const columns = [
  {
    title: "序号",
    dataIndex: "",
    key: "rowIndex",
    width: 60,
    align: "center",
    customRender: function (t, r, index) {
      return parseInt(index) + 1;
    },
  },
  {
    title: "线体",
    align: "center",
    dataIndex: "lineName",
  },
  {
    title: "工序工单",
    align: "center",
    dataIndex: "processBillNo",
  },
  {
    title: "PN/SN",
    align: "center",
    dataIndex: "pnsn",
  },
  {
    title: "产品编码",
    align: "center",
    dataIndex: "productCode",
  },
  {
    title: "产品名称",
    align: "center",
    dataIndex: "productName",
  },
];
//老化记录
const Binding_record = [
  {
    title: "序号",
    dataIndex: "",
    key: "rowIndex",
    width: 60,
    align: "center",
    customRender: function (t, r, index) {
      return parseInt(index) + 1;
    },
  },
  {
    title: "线体",
    align: "center",
    dataIndex: "lineName",
  },
  {
    title: "工序工单",
    align: "center",
    dataIndex: "processBillNo",
  },
  {
    title: "产品编码",
    align: "center",
    dataIndex: "productCode",
  },
  {
    title: "产品名称",
    align: "center",
    dataIndex: "productName",
  },
  {
    title: "数量",
    align: "center",
    dataIndex: "qty",
  },
  {
    title: "SN",
    align: "center",
    dataIndex: "recordName",
  },
  {
    title: "容器码",
    align: "center",
    dataIndex: "containerCode",
  },
  {
    title: "老化开始时间",
    align: "center",
    dataIndex: "ageStartTime",
    customRender: (text) => {
      return timestampToDatetime(text, 1);
    },
  },
  {
    title: "老化预计结束时间",
    align: "center",
    dataIndex: "ageExpectEndTime",
    customRender: (text) => {
      return timestampToDatetime(text, 1);
    },
  },
  {
    title: "老化状态",
    align: "center",
    dataIndex: "ageStatus",
    customRender: (text) => {
      switch (text) {
        case 0:
          return "老化未开始";
        case 1:
          return "老化中";
        case 2:
          return "老化结束";
        case 3:
          return "老化提前结束";
      }
    },
  },
  {
    title: "操作人",
    align: "center",
    dataIndex: "operaterName",
  },
  {
    title: "信息推送",
    align: "center",
    dataIndex: "mgsPush",
  },
];
export default {
  name: "Processkey",
  mixins: [mixins],
  components: {
    Reason,
  },
  data() {
    return {
      url: {
        getGZ: "/mes-craft/craft/mesPeDefinition/getAllStation", //获取工站
        endAging: "/mes-manufacture/mfAgingLogs/endAging", //开始老化
        getAgingInfo: "/mes-manufacture/mfAgingLogs/getAgingInfoByBarCode", //根据条码获取老化详情
        containerInfo: "/mes-manufacture/mfWip/list", //分页获取当前容器清单
        getAgeHistory: "/mes-manufacture/mfAgingLogs/getAgeHistory", //老化记录
        getAgingnum: "/mes-manufacture/mfAgingLogs/getAgingCount", //获得老化数量统计
        judgeAging: "/mes-manufacture/mfAgingLogs/readyForAgeByBarCode", //判断是否需要老化
      },
      columns: [], //条码信息表格
      columns1: [], //右下角表
      dataSource: [],
      tags: false,
      bindrecordData: [],
      ipagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ["10", "20", "30"],
        showTotal: (total, range) => {
          return range[0] + "-" + range[1] + " 共" + total + "条";
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0,
      },
      searchForm: {
        SN: "",
        info: "",
      },
      tableScroll1: {
        y: 110,
      },
      form: {
        barCode: "", //容器码
        productCode: "", //产品编码
        productName: "", //产品名称
        standarAgingTime: "", //标准老化时长
        productQty: "", //产品数量
      },
      selectedRowKeys: [],
      selectionRows: [], //选中的record
      stationList: [],
      loadingRecord: false,
      message: "",
    };
  },
  watch: {
    "searchForm.SN": function (val) {
      this.containerInfo(val);
      this.getAgingInfo(val);
    },
  },
  computed: {
    tableScroll: function () {
      // if (this.columns.length > 13) {
      // return { x: this.columns.length * 150 - 450, y: 180 };
      // }
      return {
        x: 600,
        y: 160,
      };
    },
  },
  created() {
    this.columns = columns;
    this.columns1 = Binding_record;
    this.searchForm.SN = this.$route.query.barCode || "";
  },
  mounted() {
    this.getColumns();
  },
  methods: {
    timestampToDatetime,
    //根据条码获得老化详情
    getAgingInfo(barCode) {
      getAction(this.url.judgeAging, { barCode }).then((res) => {
        if (res.success) {
          switch (res.data.ageStatus) {
            case 0:
              this.$router.push({
                path: "/work/datacollect/Endaging",
                query: {
                  barCode,
                },
              });
              break;
            case 1:
              this.form = res.data;
              break;
            case 2:
              this.$message.warning("该容器已经老化结束");
              break;
          }
        } else {
          this.$message.warning(res.msg);
        }
      });
    },
    getAgingnum() {
      postAction(this.url.getAgingnum, { barCode: "" }).then((res) => {
        if (res.success) {
        }
      });
    },
    //获得老化记录
    getColumns() {
      this.loadingRecord = true;
      let params = {
        lineCode: this.topForm.lineCode,
        stationCode: this.topForm.stationCode,
      };
      postAction(this.url.getAgeHistory, params).then((res) => {
        if (res.success) {
          this.bindrecordData = res.data;
        }
        this.loadingRecord = false;
      });
    },
    //结束老化
    endAging() {
      if (!this.form.barCode) {
        return this.$message.warning("请先扫描容器再点击结束老化");
      }
      let nowTime = new Date().getTime();
      if (nowTime > this.bindrecordData.ageExpectEndTime) {
        this.$refs.Reason.edit();
        this.$refs.Reason.title = "提醒";
        this.$refs.Reason.disableSubmit = false;
      } else {
        this.endOking();
      }
    },
    removeNull(params) {
      let da = Object.keys(params);
      da.map((item) => {
        if (params[item] === "") {
          delete params[item];
        }
      });
    },
    //获取当前容器清单
    containerInfo(val) {
      let params = {
        containerCode: val,
        bindFlag: 1,
      };
      this.removeNull(params);
      postAction(this.url.containerInfo, params).then((res) => {
        if (res.success) {
          this.dataSource = res.data.records;
        }
      });
    },
    // 结束老化
    endOking(earlyEndAgingReason) {
      let params = {
        barCode: this.form.barCode,
        earlyEndAgingReason,
        lineCode: this.topForm.lineno,
        lineName: this.topForm.lineName,
        stationCode: this.topForm.stationCode,
        stationName: this.topForm.stationName,
      };
      postAction(this.url.endAging, params)
        .then((res) => {
          if (res.data) {
            // this.$message.success("开始老化");
            this.tags = true;
            this.message = this.form.barCode + "容器老化结束";
            // setTimeout(() => {
            //   this.handleClose();
            // }, 3000);
          } else {
            this.$message.warning("结束老化失败");
          }
        })
        .finally(() => {
          this.$refs.Reason.visible = false;
          this.getColumns();
        });
    },
    onSelectChange(selectedRowKeys, selectionRows) {
      this.selectedRowKeys = selectedRowKeys;
      this.selectionRows = selectionRows;
      console.log(this.selectedRowKeys, this.selectionRows);
    },
    handleClose() {
      this.tags = false;
    },
    handleTableChange(pagination) {
      // 分页、排序、筛选变化时触发
      // TODO 筛选
      // if (Object.keys(sorter).length > 0) {
      //   this.isorter.column = sorter.field
      //   this.isorter.order = sorter.order == 'ascend' ? 'asc' : 'desc'
      // }
      // this.ipagination = pagination
      // this.loadData()
    },
  },
};
</script>
<style scoped>
@import "~@assets/less/common.less";
.left_list {
  height: 250px;
  border: 1px solid #eee;
  padding: 0px 10px;
  padding-top: 30px;
}
.notice .poros-alert-message {
  font-size: 25px;
  color: #67c23a;
}
.box {
  height: 100px;
  border-radius: 3px;
  color: #eee;
}
.box p {
  text-align: center;
  line-height: 35px;
  font-size: 25px;
}
</style>